<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据选择页面</title>

<link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">

<link href="jqueryui/jquery-ui.min.css" rel="stylesheet">

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="jqueryui/jquery-ui.min.js"></script>
<script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
	
	
		$(".col-xs-6").draggable();
		$("#tableName").change(function(){
			
		//	console.log($("#column div").length)
			
			$("#column div").each(function(){
				$(this).hide();
			});
			
			if($(this).val().length<1){
				alert("请选择表名");
				return;
			}else{
				var id="#"+$(this).val();
			 
				$(id).show();
			 
			}
		});
		
		$("#determine").click(function(){
			$("#column div").each(function(){
				 if($(this).is(':visible')){
				//	 console.log($(this).attr("id"));//获取到表名
					 var tableName=$(this).attr("id");
					var mes="<a  class='list-group-item active'> <h4 class='list-group-item-heading'>"+
			 			tableName+
				      "</h4>  </a>"+
				 	  "<a   class='list-group-item'>";
					 $(this).find("input").each(function(){
						 if($(this).attr("checked")){
							console.log($(this).val());
									mes=mes+" <p class='list-group-item-text'>"+$(this).val()+"</p>"; 
						 }
					 });
					 mes=mes+"</a>"
					 $("#tables").append(mes);
				 }
					
			});
		});
});

</script>
</head>
<body>
	<div style="padding: 100px 100px 10px;">

		<c:forEach var="bean" items="${list}">
			<div class="col-xs-6 col-sm-3">
				<a href="#" class="list-group-item active">
					<h4 class="list-group-item-heading">${bean.name}     <input type="checkbox"></h4>
				</a>
				<c:forEach items="${bean.column}" var="column">
					<a href="#" class="list-group-item">

						<p class="list-group-item-text">  <input type="checkbox">   ${column} </p>
					</a>
				</c:forEach>
			</div>

		</c:forEach>
		<div class="col-xs-6 col-sm-3"></div>
</body>
</html>